<script src='https://unpkg.com/panzoom@9.4.0/dist/panzoom.min.js'></script>
<script type="module">
    import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10.2.2/dist/mermaid.esm.min.mjs"
    mermaid.initialize({
        startOnLoad: false,
        securityLevel: 'loose',
        theme: 'dark',
        themeVariables: {
            fontSize: '16px',
            lineColor: '#F8B229',
            clusterBkg: '#0000',
            edgeLabelBackground: '#1A1A1A'
        }
    });
    mermaid.run({
        querySelector: '.mermaid',
        postRenderCallback: id => {
            let el = document.getElementById(id);
            const pz = panzoom(el, {
                smoothScroll: false,
                zoomDoubleClickSpeed: 1,
                beforeWheel: function (e) {
                    // allow wheel-zoom only if ctrl is down. Otherwise - ignore
                    var shouldIgnore = !e.ctrlKey;
                    return shouldIgnore;
                }
            })

            const plusDiv = document.createElement('div');
            plusDiv.style = "width: 25px; height: 25px; position: absolute; right: 0.8em; bottom: 0.8em; border: 2px solid #BBB; text-align: center; padding: auto; font-size: 18px; background-color: #222; cursor: pointer"
            plusDiv.innerText = "+"
            plusDiv.onclick = () => {
                pz.smoothZoom(0, 0, 1.2)
            }
            el.parentNode.appendChild(plusDiv);

            const minusDiv = document.createElement('div');
            minusDiv.style = "width: 25px; height: 25px; position: absolute; right: 2.4em; bottom: 0.8em; border: 2px solid #BBB; text-align: center; padding: auto; font-size: 18px; background-color: #222; cursor: pointer"
            minusDiv.innerText = "-"
            minusDiv.onclick = () => {
                pz.smoothZoom(0, 0, 0.8)
            }
            el.parentNode.appendChild(minusDiv);
        }
    })

    // Callback for use in mermaid diagrams that will open a relative doc link when clicking.
    //
    // Example doc link for `arg` would be: jumpy/session/struct.SessionManager.html
    window.docLink = (arg) => {
        let pathElems = new URL(window.location.href).pathname.split('/').filter(x => x != '');
        for (let i = pathElems.length - 1; i > -1; i--) {
            if (pathElems[i] != 'jumpy' && pathElems[i] != 'jumpy_core') {
                pathElems = pathElems.slice(0, i - 1);
                break;
            }
        }
        window.location.href = '/' + pathElems.join('/') + '/' + arg;
    }
</script>
<style>
    /*
        Hide the lock icons shown for private items. It isn't helpful
        in this context.
    */
    [title="Restricted Visibility"] {
        display: none;
    }

    .mermaid {
        overflow: hidden !important;
        border: 1px solid #BBB;
        border-radius: 1em;
        cursor: move;
        position: relative;
    }

    .dotted rect {
        stroke-dasharray: 5;
    }

    .code .nodeLabel {
        color: #2dbfb8 !important;
    }

    .code rect {
        transition: 0.2s;
        stroke: #2dbfb8 !important;
    }

    .code:hover rect {
        transform: scale(1.05)
    }
</style>
